New content: <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岩溶隧道运营监测预警系统 - 注册</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af',
                        secondary: '#1d4ed8'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .bg-register {
            background-image: url('https://ai-public.mastergo.com/ai/img_res/3b99951b93ff30c69d89febcb5930794.jpg');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="min-h-[1024px]">
    <div class="flex min-h-screen">
        <div class="hidden lg:flex lg:w-[40%] bg-register relative">
            <div class="absolute inset-0 bg-primary bg-opacity-70"></div>
            <div class="relative z-10 flex flex-col justify-between p-12 text-white">
                <div>
                    <div class="font-['Pacifico'] text-3xl mb-4">logo</div>
                    <h1 class="text-4xl font-bold mb-4">岩溶隧道运营监测预警系统</h1>
                </div>
                <div class="space-y-6">
                    <p class="text-lg">加入我们的专业团队</p>
                    <p class="text-sm opacity-80">注册成为会员，体验全方位的隧道监测服务和专业技术支持</p>
                </div>
            </div>
        </div>
        
        <div class="flex-1 flex items-center justify-center p-8">
            <div class="w-full max-w-md space-y-6">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">注册账号</h2>
                    <p class="text-gray-600">请填写以下信息完成注册</p>
                </div>
                
                <form class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-user text-gray-400"></i>
                            </div>
                            <input type="text" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-button text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请设置用户名（6-20个字符）" required>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-button text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请设置密码（8-20个字符）" required>
                            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i class="fas fa-eye text-gray-400"></i>
                            </button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-button text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请再次输入密码" required>
                            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i class="fas fa-eye text-gray-400"></i>
                            </button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-mobile-alt text-gray-400"></i>
                            </div>
                            <input type="tel" class="block w-full pl-10 pr-32 py-3 border border-gray-300 rounded-button text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入手机号码" required>
                            <button type="button" class="absolute right-0 top-0 h-full px-4 text-sm text-primary border-l border-gray-300 whitespace-nowrap !rounded-button">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-shield-alt text-gray-400"></i>
                            </div>
                            <input type="text" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-button text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入短信验证码" required>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">图形验证码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-image text-gray-400"></i>
                            </div>
                            <input type="text" class="block w-full pl-10 pr-32 py-3 border border-gray-300 rounded-button text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入图形验证码" required>
                            <div class="absolute inset-y-0 right-0 flex items-center">
                                <img class="h-full w-28 rounded-r-button" src="https://ai-public.mastergo.com/ai/img_res/219a926cc208bd3d114a8b75afa4a8dd.jpg" alt="验证码">
                            </div>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                        </div>
                        <div class="ml-2">
                            <label class="text-sm text-gray-600">
                                我已阅读并同意
                                <a href="#" class="text-primary hover:text-secondary">《用户协议》</a>
                                和
                                <a href="#" class="text-primary hover:text-secondary">《隐私政策》</a>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-button text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors whitespace-nowrap !rounded-button">
                        注册
                    </button>

                    <div class="text-center">
                        <span class="text-gray-600 text-sm">已有账号？</span>
                        <a href="./login.html" class="text-primary hover:text-secondary text-sm ml-1">立即登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>